<template>
  <div style="background:#f8f8f8" :class="{'mobile': isMobile}">
      <!-- 背景图片 -->
      <div class="back">
        <div>
          <h1>Swellpro Academy</h1>
          <p>Tutorial Videos and Splendid Videos of Swellpro Products.</p>
        </div>
      </div>

      <!-- 视频内容 -->
      <div class="container">
        <div class="left">
          <p v-for="(item, index) in videos" :key="index" :class="['left-item', { 'left-item__active': index === activeIndex }]" @click="() => activeIndex = index">{{item.name}}</p>
        </div>

        <div class="right" v-for="(item, index) in videos" :key="index" v-show="activeIndex === index">
            <div class="video-item" v-for="(singleVideo, singleIndex) in item.videos" :key="'single' + singleIndex" >
              <div @click="show(singleVideo.url)">
                <div class="video-back" :style="{backgroundImage: 'url(' + singleVideo.preview_image + ')'}">
                  <div class="video-btn">
                    <p class="icon-z iconfont"></p>
                  </div>
                </div>
                <p>
                  {{singleVideo.name}}
                </p>
              </div>
            </div>
          </div>
        </div>

        <div id="mask" v-show="videoPlay" @click.prevent="showMask(false)">
          <div class="playContent" ref="playContent" @click.stop="showMask(true)">
              <iframe frameborder="0" width="100%" height="100%" :src="videoSrc" allowfullscreen></iframe>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Http from '~/plugins/http'
export default {
  data () {
    return {
      types: [
        {
          id: 1,
          name: 'SPLASH DRONE 3+'
        },
        {
          id: 2,
          name: 'SPRY DRONE'
        },
      ],
      activeIndex: 0,
      videoPlay: false, //  是否展示视频
      videoSrc: '',
      screenHeight: '',
      topToScreen: '',
      videos: [],
      isMobile: this.$isMobile,
    };
  },

  head() {
    return {
        title: '',
        meta: [
            { hid: 'description', name: 'description', content: ''},
        ],
    }
  },

  watch: {
      topToScreen(newVal){
          this.beCenter(newVal);
      }
  },

  async asyncData() {
      const {
          http,
          api: { videos }
      } = Http

      const { data, error } = await http.request(videos)

      console.log(data, error);

      return { videos: data && data.result }
  },

  mounted() {
    this.screenHeight = window.innerHeight;
    window.onscroll = ()=>{ //获取滚动条离浏览器顶部的距离
    var e=document.documentElement.scrollTop||document.body.scrollTop;
         this.topToScreen = e;
    };
    this.beCenter(0);
  },

  methods: {
    showMask(flag){
        this.videoPlay = flag;
        if(flag == false)
        this.videoSrc = '';
    },

    show(url){
        this.videoSrc = url;
        this.showMask(true);
    },

    beCenter(flag){
        let pos = 500;
        this.$refs.playContent.style.marginTop = `${(this.screenHeight - pos)/2 + flag}px`;
    },
  }
}

</script>
<style lang='stylus' scoped>
pxToVw(px)
    return unit(px / 7.5 * 2, 'vw')
pxToVh(px)
    return unit(px / 7.5 * 2, 'vh')
.back
  background-image url('https://cdn.swellpro.cn/video/video_back.jpg')
  background-position center
  background-repeat no-repeat
  background-size cover
  width 100%
  height 250px
  display flex
  justify-content center
  align-items center
  >div
    color #fff
    h1
      text-align center
      font-size 40px
      font-weight 300
      margin-bottom 30px
.container
  display flex
  flex-flow row wrap
  padding 30px 0
  width 1000px
  .left
    flex 0 0 15%
    border-right 1px solid rgba(0,0,0,.3)
    box-sizing border-box
    &-item
      font-size 13px
      padding-bottom 40px
      font-weight 400
      cursor pointer
      color rgba(0,0,0,.3)
      transtion all .3s
    .left-item__active
      color #000
      font-size 14px
  .right
    flex 0 0 85%
    display flex
    box-sizing border-box
    padding-left 20px
    flex-flow row wrap
    .video-item
      box-sizing border-box
      padding-right 20px
      flex 0 0 33.3333%
      width 100%
      margin-bottom 15px
      div
        width 100%
        height 100%
        background #fff
        cursor pointer
        transition all .3s
        &:hover
          box-shadow 0 15px 30px rgba(0, 0, 0, .1)
          .video-btn
            background #f26444
        .video-back
          width 100%
          height 188px
          position relative
          background-image url('https://cdn.swellpro.cn/video/splashDrone-12.jpg')
          background-position center
          background-repeat no-repeat
          margin-bottom 8px
          display flex
          justify-content center 
          align-items center
        .video-btn
          width 54px
          height 34px
          border 2px solid #fff
          border-radius 6px
          background-color rgba(0, 0, 0, .6)
          transition all .6s
          display flex
          justify-content center
          align-items center
          p
            font-size 25px
            display block
            color #fff
            position relative
            top 3px
        p
          text-align center
          margin 0 auto 8px
          padding 0 8px
#mask
    position absolute
    z-index 110
    left 0px
    top 0px
    width 100%
    height 100%
    background rgba(0,0,0,.5)
    display flex
    justify-content center
    .playContent
        width 900px
        height 500px
        background #fff

.mobile
  .back
    >div
      h1
        font-size pxToVw(25)
      p
        text-align center
      
</style>